<template>
  <div>
<div class="swiper-container"
             ref="mySwiper">
          <div class="swiper-wrapper">
            <div class="swiper-slide"
                 v-for="(item) in CarouselList"
                 :key="item.id">
              <img :src="item.imgUrl"/>
            </div>
           
          </div>
          <!-- 如果需要分页器 -->
          <div class="swiper-pagination"></div>

          <!-- 如果需要导航按钮 -->
          <div class="swiper-button-prev"></div>
          <div class="swiper-button-next"></div>
        </div>
  </div>
</template>

<script>
//引入Swiper
import Swiper from "swiper";
  export default {
      name:'Carousel',
      props:["CarouselList"],
      watch:{
          //监听父组件给子组件传递过来的props属性
          //没有执行：为什么不执行？
          //floorInfo是父组件传递过来的数据，因为没有变化，导致监听不到
          CarouselList:{
              //监听属性立即监听，不管属性书否发生变化，立即执行一次。
              immediate:true,
              handler(){
                  //监听到属性变化，立即初始化swiper实例
                  this.$nextTick(()=>{
                      //回调里写代码的时候1:服务器的数已经回来了，2:v-for执行完毕，结构已经有了
                      new Swiper(this.$refs.mySwiper,{
                          //是否循环轮播
                        loop:true,
                        effect:"cube",
                        //如果需要分页器
                        pagination:{
                            el: ".swiper-pagination",
                            //分页器点击小球时候切换图片
                            clickable:true,                            
                        },
                        
                        navigation:{
                            nextEl:".swiper-button-next",
                            prevEl:".swiper-button-prev",
                            
                        },
                  });
                  })
                  
              },
          },
      },
  };
</script>

<style scoped>
  
</style>